<template>
  <div class="crane-markdown">
    <div class="preview">
      <MdPreview
        :editor-id="id"
        :model-value="text"
        :theme="useThemeStore().isLightThem ? 'light' : 'dark'"
      />
      <ArticleComment :id="articleId" style="margin-top: 30px"></ArticleComment>
    </div>
    <div class="right">
      <Myself v-viewport="isIn"></Myself>
      <div :class="{ menu: data.isIn, 'menu-fixed': !data.isIn }">
        <MdCatalog :editor-id="id" :scroll-element="scrollElement" />
      </div>
    </div>
  </div>
</template>

<script setup>
import { MdPreview, MdCatalog } from 'md-editor-v3';

// preview.css相比style.css少了编辑器那部分样式
import 'md-editor-v3/lib/preview.css';
import Myself from './Myself.vue';
import { reactive } from 'vue';
import ArticleComment from '@/pages/index/view/comment/ArticleComment.vue';
import useThemeStore from '@/store/modules/theme.store';

const id = 'preview-only';
const scrollElement = document.querySelector('.crane-main');

const data = reactive({
  isIn: false
});

defineProps({
  text: {
    type: String,
    required: true
  },
  articleId: {
    type: String,
    required: true
  }
});

function isIn(e) {
  data.isIn = e;
}
</script>

<style scoped lang="less">
@media (max-width: 1161px) {
  /* 在宽度小于或等于 1035px 的屏幕上应用以下样式 */
  /* 在这里添加你的样式规则 */
  .pc-container {
    display: none;
  }

  .mobile-container {
    display: block;
  }

  .preview {
    width: 100%;
    box-sizing: border-box;
  }

  .right {
    display: none;
  }
}

@media (min-width: 1160px) {
  /* 在宽度大于 1035px 的屏幕上应用以下样式 */
  /* 在这里添加你的样式规则 */
  .pc-container {
    display: block;
  }

  .mobile-container {
    display: none;
  }

  .preview {
    flex: 1;
    box-sizing: border-box;
  }

  .right {
    width: 320px;
    margin-left: 20px;
  }
}
.md-editor-previewOnly {
  border-radius: 20px !important;
  box-shadow: var(--crane-ring-offset-shadow, 0 0 #0000),
    var(--crane-ring-shadow, 0 0 #0000), var(--crane-shadow);
}
.crane-markdown {
  width: 100%;
  display: flex;
  margin-bottom: 200px;
  position: relative;

  .menu {
    width: 300px;
    box-sizing: border-box;
    margin-top: 20px;
    padding: 30px;
    box-shadow: var(--crane-ring-offset-shadow, 0 0 #0000),
      var(--crane-ring-shadow, 0 0 #0000), var(--crane-shadow);

    border-radius: 20px;

    position: relative;
    background-color: var(--background-secondary);

    transition: all 0.2s ease-in-out;
  }

  .menu-fixed {
    width: 300px;
    box-sizing: border-box;
    padding: 30px;
    box-shadow: var(--crane-ring-offset-shadow, 0 0 #0000),
      var(--crane-ring-shadow, 0 0 #0000), var(--crane-shadow);

    border-radius: 20px;

    position: fixed;
    background-color: var(--background-secondary);
    top: 20px;

    transition: all 0.2s linear;
  }
}
</style>
